<template>
    <div style="background: #f2f2f2;">
        <el-card shadow="never" size="small" style="border:0px solid #fff">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                </div>
            </template>
            <div class="flex-row">
                <div class="row-left">
                    <el-form-item label="用户名">
                        15803010216
                    </el-form-item>
                    <el-form-item label="昵称" style="margin-bottom: 0;">
                        <EditItem ref="nameRef" is-switch>
                            <span style="line-height:35px;"> {{ state.nickName || '未设定'}}</span>
                            <template v-slot:input>
                                <el-input class="no-border" v-model="state.nickName" placeholder="建议填写真实姓名" style="width: 200px;">
                                    <template v-slot:append>
                                        <el-icon style="margin-right: 10px;" @click="hanleNameClose">
                                            <Close />
                                        </el-icon>
                                        <el-icon @click="handleNameCheck">
                                            <Check />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </template>
                        </EditItem>
                    </el-form-item>
                </div>
                <div class="flex-1">
                    <el-avatar :size="76" :src="state.avatarUrl" @click="handleEditAvatar"/>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" style="border:0px solid #fff;margin-top: 20px;">
            <template #header>
                <div class="card-header">
                    <span>账号安全</span>
                </div>
            </template>
            <div class="flex-row">
                <div class="row-left">
                    <el-form-item label="手机号">
                        <EditItem @edit="handleEditPhone">
                            +86-15803010216
                        </EditItem>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <EditItem @edit="handleEditEmail">
                            未绑定
                        </EditItem>
                    </el-form-item>
                    <el-form-item label="密码">
                        <EditItem @edit="handleEditPassword">
                            未绑定
                        </EditItem>
                    </el-form-item>
                </div>
                <div class="flex-1">

                </div>
            </div>
        </el-card>
        <!-- <el-card shadow="never" style="border:0px solid #fff;margin-top: 20px;">
            <template #header>
                <div class="card-header">
                    <span>所属企业</span>
                </div>
            </template>
        </el-card> -->

        <PhoneEditDialog v-model:visible="state.phoneVisible"/>
        <EmailEditDialog v-model:visible="state.emailVisible"/>
        <SettingPasswordDialog v-model:visible="state.passwordVisible"/>
        <AvatarEditDialog v-model="state.avatarVisible" :avatar="state.avatarUrl"/>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import EditItem from '@/components/EditItem.vue'
import { Check, Close } from '@element-plus/icons-vue'
import PhoneEditDialog from '../components/PhoneEditDialog.vue'
import EmailEditDialog from '../components/EmailEditDialog.vue'
import SettingPasswordDialog from '../components/SettingPasswordDialog.vue'
import AvatarEditDialog from '../components/AvatarEditDialog.vue'

const nameRef = ref(null)

const state = reactive({
    nickName: '',
    avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    phoneVisible: false,
    emailVisible: false,
    passwordVisible: false,
    avatarVisible: false,
})

const hanleNameClose = () => {
    nameRef.value.cancelEdit()
}

const handleNameCheck = () => {
    nameRef.value.cancelEdit()
}


const handleEditPhone = () => {
    state.phoneVisible = true
}

const handleEditEmail = () => {
    state.emailVisible = true
}

const handleEditPassword = () => {
    state.passwordVisible = true
}

const handleEditAvatar = () => {
    state.avatarVisible = true
}

</script>

<style lang="scss" scoped>
.card-header {
    font-size: 14px;
}

.row-left {
    min-width: 300px;
    margin-right: 20px;

    :deep(.el-form-item) {
        .el-form-item__label{
            min-width: 82px;
            color: #afabbe;
            font-weight: 500;
            font-size: 14px;
            justify-content: flex-start;
        }

        .el-form-item__content {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #3b3751;
            overflow: hidden;
        }
    }

    :deep(.el-input-group__append) {
        padding: 10px;
        background: transparent;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #999;
        border-radius: 0;
    }

    .no-border{
        :deep(.el-input__wrapper) {
            border-bottom: 1px solid #999;
            box-shadow: none;
            border-radius: 0;
        }
    }
}
</style>